<template>
  <div id="me">
    <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="name" required>
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="生日" required>
        <el-col :span="11">
          <el-form-item prop="date">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date" style="width: 130%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">确定更改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "Me",
    data() {
      return {
        ruleForm: {
          name: '',
          date: '',
        }
      }
    },
    props: {
      user: {
        default() {
          return null
        }
      }
    },
    methods: {
      submitForm() {
        let userList = JSON.parse(window.localStorage.getItem('user'))
        userList[this.user].name = this.ruleForm.name
        userList[this.user].date = this.ruleForm.date
        window.localStorage.setItem('user', JSON.stringify(userList))
        this.$router.go(0)
      },
    },
    created() {
      let userList = JSON.parse(window.localStorage.getItem('user'))
      this.ruleForm.name = userList[this.user].name
      this.ruleForm.date = userList[this.user].date
    }
  }
</script>

<style scoped>
  #me {
  }
</style>
